<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ str }}</h4>
    <h4>子组件给的value: {{ toy }}</h4>

    <button>点我</button>

<!--    给子组件Child绑定事件-->
<!--    自定义事件推荐命名 : send-toy√ sendToy×-->
    <Child @send-toy="saveToy"/>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Child from './Child.vue'
  import {ref} from "vue";

  let str = ref('你好')
  let toy = ref('')

  //方法
  // function test() {
  //   str.value = '哈哈'
  // }
  function saveToy(value:string) {
    console.log('触发子组件',value)
    toy.value = value
  }
</script>

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
    border-radius: 10px;
	}
	.father button{
		margin-right: 5px;
	}
</style>